<template>
  <div class="feedback">
    <van-collapse v-model="activeName" accordion v-if="list.length" @change="onItemClick">
      <van-collapse-item :name="String(index)" v-for="(item, index) in list" :key="index">
        <template #title>
          <div class="under-title">
            <div class="name">
              <span v-if="item.userName">【{{ item.userName }}】</span>
              {{ item.titleName }}
            </div>
            <div class="tit" v-show="item.secondTitleName">({{ item.secondTitleName }})</div>
          </div>
        </template>
        <template v-if="feedbackData.length">
          <div class="feedback-details-item" v-for="(subItem, subIndex) in feedbackData" :key="subIndex">
            <feedback-result-item
              :feedbackItem="subItem"
              :feedIbackTitles="titles"
              :pageBtns="pageBtns"
              @handleFeedback="onHandleFeedback"></feedback-result-item>
            <!-- color="#d81e06" background="#ffe1e1" -->
            <template v-if="subItem.isSubmit === 1 && subItem.isReturnBack === 1">
              <van-notice-bar color="#d81e06" background="#ffe1e1" wrapable :scrollable="false">
                {{ feedbackReturnTips }}
              </van-notice-bar>
              <van-notice-bar color="#555" background="#f7f7f7" wrapable :scrollable="false">
                退回原因：{{ subItem.auditReason }}
              </van-notice-bar>
            </template>
          </div>
        </template>
        <van-empty description="暂无数据" v-else />
      </van-collapse-item>
    </van-collapse>
    <van-empty description="暂无数据" v-else />
    <van-dialog v-model="feedbackAuditTipsShow" title="提示" show-cancel-button :before-close="onBeforeClose">
      <div class="tips-box">
        <p class="tips-title">
          <van-icon name="warning" />
          确定要{{ formFeedbackData.auditStatus === 0 ? '退回' : '通过' }}此次反馈吗？
        </p>
        <van-field
          v-if="formFeedbackData.auditStatus === 0"
          type="textarea"
          v-model="formFeedbackData.auditReason"
          :rows="2"
          placeholder="请输入退回原因"
          :autosize="{ minRows: 2, maxRows: 100 }"
          maxlength="150"
          show-word-limit></van-field>
      </div>
    </van-dialog>
  </div>
</template>
<script>
import {
  listFeedBackFirstOrder,
  listFeedBackFirstOrderNew,
  listFeedBackSecondOrder,
  listFeedBackSecondOrderNew,
  auditFeedBackRecord,
} from '@api/api-task.js'
import FeedbackResultItem from '../components/FeedbackResultItem.vue'
import { feedbackReturnTips } from '../common/common'
export default {
  name: 'TaskDetailsFeedback',
  components: { FeedbackResultItem },
  props: {
    // 详情
    detailsData: {
      type: Object,
      default: () => {},
    },
    // 按钮
    pageBtns: {
      type: Array,
      default: () => {},
    },
  },
  data() {
    return {
      feedbackReturnTips: feedbackReturnTips,
      loginPostInfo: JSON.parse(localStorage.userInfo).loginPostInfo,
      tipVisible: false,
      tipMsg: '',
      rowJsonData: {}, // 提交反馈的数据
      feedbackAuditTipsShow: false,
      activeName: '',
      list: [],
      formFeedbackData: {
        auditReason: '',
        feedBackReportId: '',
        auditStatus: 1, // ;0不通过 1通过
      },
      gridOptions: {
        border: true,
        resizable: true,
        // showOverflow: true,
        keepSource: true,
        height: 440,
        align: 'center',
        editConfig: {
          // trigger: 'click',
          // mode: 'row',
          showStatus: true,
          activeMethod: this.beforeEditMethod,
          beforeEditMethod: this.beforeEditMethod,
        },
        columns: [], // 表格列
        data: [], // 数据
        editRules: {},
      },
      activeJson: {}, // 手风琴激活行的json
      titles: [], // 没有处理过的动态表头数据
      feedbackData: [], // 反馈数据
    }
  },
  methods: {
    /* 查询一级列表 */
    async initdata() {
      let API = listFeedBackFirstOrder
      if (this.detailsData.feedbackCycleType === '2') {
        API = listFeedBackFirstOrderNew
      } else {
        API = listFeedBackFirstOrder
      }
      const { data = [] } = await API({ taskId: this.detailsData.id })
      this.list = data.concat()
      if (this.list.length) {
        if (JSON.stringify(this.activeJson) === '{}') {
          this.activeJson = data[0]
        } else {
        }
        this.initTableData()
      }
    },
    /* 查询二级列表 */
    async initTableData() {
      let API = listFeedBackSecondOrder
      if (this.detailsData.feedbackCycleType === '2') {
        API = listFeedBackSecondOrderNew
      } else {
        API = listFeedBackSecondOrder
      }
      const { data = {} } = await API({ ...this.activeJson })
      this.titles = data.titles
      this.feedbackData = data.data
    },

    /* 跳转详情 */
    onItemClick(e) {
      // console.log(e)
      // console.log(this.list[e])
      if (!e) {
        return
      }
      this.activeJson = this.list[e]
      this.initTableData()
      // this.$router.push({
      //   path: '/feedbackDetails',
      //   query: {
      //     param: encodeURIComponent(JSON.stringify(item)),
      //   },
      // })
    },
    /* 提交 和 审核的功能暂时不做 */
    /* 判断该单元格是否编辑 */
    beforeEditMethod({ row }) {
      let isEdit = true
      if (row.isSubmit === 0 || row.isReturnBack === 1) {
        isEdit = true
      } else {
        isEdit = false
      }
      return isEdit
    },
    /* 审核退回、通过 */
    onHandleFeedback(data) {
      // console.log(data)
      const { type = '', feedbackItem = {} } = data
      this.formFeedbackData.auditStatus = type
      this.formFeedbackData.feedBackReportId = feedbackItem.feedBackReportId
      this.formFeedbackData.auditReason = ''
      this.feedbackAuditTipsShow = true
    },
    onBeforeClose(action, done) {
      // 点击了确定按钮
      if (action === 'confirm') {
        this.submitDataFeedbackAudit()
        return done(false) // 直接return它即可阻止
      } else {
        // 点击了取消按钮
        done(true) // 关闭弹窗, true可以省略
      }
    },
    /* 提交审核 */
    async submitDataFeedbackAudit() {
      if (this.formFeedbackData.auditStatus === 0 && !this.formFeedbackData.auditReason) {
        this.$toast('退回原因不能为空')
        return
      }
      const { code = 0, msg = '' } = await auditFeedBackRecord({
        ...this.formFeedbackData,
      })
      if (code === 0) {
        this.$toast.success(msg)
      }
      this.feedbackAuditTipsShow = false
      if (this.formFeedbackData.auditStatus === 0) {
        this.activeJson = {}
        this.activeName = ''
      }
      this.initdata()
    },
    /* 监听手风琴变化 */
    onCollChange(activeName) {
      if (activeName) {
        this.activeJson = this.list[Number(this.activeName)]
        this.initTableData()
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.feedback {
  margin: 0 px2rem(20);
}
/deep/.van-collapse-item {
  margin-bottom: px2rem(20);
}
/deep/.van-collapse-item__content {
  padding: 0;
}
.feedback-details-item {
  background: #fff;
  border-top: 4px solid #167add;
  padding: 0 px2rem(10) px2rem(10);
  .van-notice-bar {
    padding: px2rem(10);
  }
}
.tips-box {
  padding: px2rem(30);
  .tips-title {
    display: flex;
    align-items: center;
    margin-bottom: px2rem(20);
    .van-icon {
      margin-right: px2rem(10);
      color: #ff976a;
    }
  }
}
.under-user {
  width: 100%;
  font-size: $fontSize24;
  @include ellipsis2(2);
  // width: px2rem(300);
  color: #085fda;
  .no-feed-tips {
    color: #e94242;
  }
}
/* .feedback {
  margin: 0 px2rem(20);
  .feedback-ul {
    background: #fff;
    .feedback-li {
      font-size: $fontSize30;
      padding: px2rem(20);
      // position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .name {
        color: #333;
      }
      .tit {
        margin-top: px2rem(20);
        color: #606266;
      }
      i {
        // position: absolute;
        color: #999;
      }
    }
  }
} */
</style>
